<template>
	<view class="point-wrap">
		<!-- 头部轮播 -->
		<view class="carousel-section" v-if="swiperList.length > 0">
			<swiper class="carousel" circular autoplay="true">
				<swiper-item v-for="(item, index) in swiperList" :key="index" class="carousel-item">
					<image :src="$util.img(item.adv_image)" @click="redirectTo(item.adv_url)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="member-point-container">
			<view class="info-wrap">
				<view class="member-info">
					<view v-if="isLogin">
						<view class="member-face"><image :src="memberInfo.user_headimg != '' ? $util.img(memberInfo.user_headimg) : $util.img('upload/uniapp/default_head.png')" /></view>
						<text class="nick-name">{{ memberInfo.nick_name }}</text>
						<view class="point">
							<text class="ns-text-color-gray">积分：</text>
							<text class="ns-text-color ns-font-size-lg uni-bold">{{ memberAccountInfo.point }}</text>
						</view>
					</view>
					<view v-else @click="clickLogin()">
						<view class="member-face"><image :src="$util.img('upload/uniapp/default_head.png')"></image></view>
						<text class="no-login ns-text-color ns-border-color">未登录</text>
						<view class="point point-empty ns-text-color-gray"></view>
					</view>
				</view>
				<view class="explain" @click="openPointPopup">
					<text class="title ns-text-color-gray">积分说明</text>
					<text class="right iconright iconfont ns-text-color-gray"></text>
				</view>
			</view>
			<view class="goods-container">
				<view class="head">
					<view class="list-title">
						<view class="title-left">
							<view class="title-left-first ns-border-color-gray-shade-20"></view>
							<view class="title-left-second ns-border-color-gray-shade-20"></view>
						</view>
						<text class="left-nav">积分兑换</text>
						<view class="title-right">
							<view class="title-left-first ns-border-color-gray-shade-20"></view>
							<view class="title-left-second ns-border-color-gray-shade-20"></view>
						</view>
					</view>
				</view>
				<view class="good_list">
					<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
						<navigator
							class="imgs"
							:url="
								item.point_exchange_type == 2
									? '/pages/goods/detail/detail?goods_id=' + item.goods_id + '&from_source=point'
									: '/pages/goods/detail/detail?goods_id=' + item.goods_id
							"
						>
							<image :src="$util.img(item.pic_cover_mid)"></image>
						</navigator>
						<view class="info">
							<view class="goods-title">
								<navigator
									class="ns-text-color-black"
									:url="
										item.point_exchange_type == 2
											? '/pages/goods/detail/detail?goods_id=' + item.goods_id + '&from_source=point'
											: '/pages/goods/detail/detail?goods_id=' + item.goods_id
									"
								>
									{{ item.goods_name }}
								</navigator>
							</view>
							<view class="goods-info">
								<text v-if="item.point_exchange_type == 2 || item.point_exchange_type == 3" class="goods_price ns-text-color">
									积分:
									<text>{{ item.point_exchange }}</text>
								</text>
								<text v-else-if="item.point_exchange_type == 1 && item.promotion_price > 0" class="ns-text-color">
									<text class="unit">￥</text>
									{{ item.promotion_price }} + {{ item.point_exchange }}积分
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" v-if="goodsList.length > 0 && pageCount > 1" />
		<view v-if="isEmpty && goodsList.length == 0" class="empty" style="padding-top:0">
			<view class="iconfont iconwenzhangchaxun"></view>
			<view class="ns-text-color-gray">没有找到您想要的商品...</view>
			<button type="primary" @click="goIndex()">去首页逛逛吧</button>
		</view>
		<view @touchmove.prevent.stop>
			<uni-popup ref="pointPopup" type="bottom">
				<view class="tips-layer">
					<view class="head"><view class="title">积分说明</view></view>
					<view class="body">
						<view class="detail ns-margin-bottom">
							<view class="uni-bold">积分的获取</view>
							<view class="ns-font-size-sm">1、积分可在注册、签到、分享、点赞、评论时获得。</view>
							<view class="ns-font-size-sm">2、在购买部分商品时可获得积分。</view>
							<view class="uni-bold">积分的使用</view>
							<view class="ns-font-size-sm">1、积分可用于兑换积分中心的商品。</view>
							<view class="ns-font-size-sm">2、积分可在购买商品时抵扣部分现金。</view>
							<view class="ns-font-size-sm">3、积分可在参与某些活动时使用。</view>
							<view class="ns-font-size-sm">4、积分不得转让，出售，不设有效期。</view>
							<view class="uni-bold">积分的查询</view>
							<view class="ns-font-size-sm">1、积分可在会员中心中查询具体数额以及明细。</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login" href="goods_point"></ns-login>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import loadingCover from '@/components/loading/loading.vue';
import nsLogin from 'components/ns-login/ns-login.vue';

export default {
	components: {
		uniLoadMore,
		uniPopup,
		loadingCover,
		nsLogin
	},
	data() {
		return {
			isLogin: false,
			memberInfo: [],
			memberAccountInfo: [],
			swiperList: [],
			goodsList: [],
			swiperIndex: '',
			pageIndex: 1,
			pageCount: 0,
			pageSize: 6,
			isEmpty: false,
			status: 'loading',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多了'
			},
			ident: false //防止初始化时，触发上拉加载
		};
	},
	onShow() {
		this.getSwiperList();
		this.getMemberInfo();
		this.getMemberAccountInfo();
		this.getGoodsList();
	},
	onReachBottom() {
		if (!this.ident) return;
		this.getGoodsList();
	},
	mixins: [http],
	methods: {
		getSwiperList() {
			this.sendRequest({
				url: 'System.Shop.advDetail',
				data: {
					ap_keyword: 'APPLET_POINT_SWIPER',
					export_type: 'data'
				},
				success: res => {
					if (res.code == 0) {
						let list = res.data.advs;
						this.swiperList = list;
						this.adInfo = res.data;
					}
				}
			});
		},
		redirectTo(link) {
			if (link == null || link == '') return;
			if (link.is_tabbar == 1) {
				this.$util.redirectTo(link.url, {}, 'tabbar');
			} else {
				this.$util.redirectTo(link.url);
			}
		},
		getGoodsList() {
			if (this.status == 'nomore') return;
			this.sendRequest({
				url: 'System.Goods.goodsList',
				data: {
					page_index: this.pageIndex,
					page_size: this.pageSize,
					order: 'sort desc,create_time desc',
					condition: JSON.stringify({
						'ng.state': 1,
						'ng.point_exchange_type': ['neq', 0]
					})
				},
				success: res => {
					this.ident = true;
					if (res.code == 0) {
						let list = res.data.data;
						this.pageCount = res.data.page_count;
						if (this.pageCount == 0) {
							this.status = 'nomore';
							this.isEmpty = true;
							this.contentText.contentnomore = '';
						} else {
							if (this.pageIndex < this.pageCount) {
								this.status = 'more';
							} else {
								this.status = 'nomore';
								this.contentText.contentnomore = '没有更多了';
							}
							this.isEmpty = false;

							if (list.length > 0) {
								this.goodsList = this.goodsList.concat(list);
								this.pageIndex++;
							}
						}
					}
					if (this.$refs.loadingCover == undefined) return;
					this.$refs.loadingCover.hide();
				}
			});
		},
		/**
		 * 获取用户信息
		 */
		getMemberInfo() {
			this.sendRequest({
				url: 'System.Member.memberInfo',
				success: res => {
					if (res.code == 0) {
						this.memberInfo = res.data.user_info;
						this.isLogin = true;
					} else {
						this.isLogin = false;
					}
				}
			});
		},
		/**
		 * 获取会员账户信息
		 */
		getMemberAccountInfo() {
			this.sendRequest({
				url: 'System.Member.memberAccount',
				success: res => {
					if (res.code == 0) {
						this.memberAccountInfo = res.data;
					}
				}
			});
		},
		// 打开积分说明弹出层
		openPointPopup() {
			this.$refs.pointPopup.open();
		},
		//去首页
		goIndex() {
			this.$util.redirectTo('/pages/index/index/index', {}, 'tabbar');
		},
		clickLogin() {
			var isLogin = false;
			// #ifdef H5
			getApp().checkLogin(() => {
				isLogin = true;
				setTimeout(() => {
					this.$refs.login.clickLogin();
				}, 100);
			});
			// #endif
			// #ifdef MP
			getApp().$vm.checkLogin(() => {
				isLogin = true;
				this.$refs.login.clickLogin();
			});
			// #endif

			if (isLogin) return;
		}
	}
};
</script>

<style lang="scss">
.point-wrap {
	height: 100vh;
	background: $page-color-base;
}
/* 头部 轮播图 */
.carousel-section {
	position: relative;

	.titleNview-placing {
		height: var(--status-bar-height);
		padding-top: 88rpx;
		box-sizing: content-box;
	}

	.titleNview-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 426rpx;
		transition: 0.4s;
	}
}

.carousel {
	width: 100%;
	height: 350rpx;

	.carousel-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
}

.point-center {
	top: 44px;
}

.point-center::-webkit-scrollbar {
	display: none;
}

.space {
	display: block;
	width: 100%;
	height: 20rpx;
	background: rgba(0, 0, 0, 0.055);
	margin-bottom: 0 !important;
}

.member-point-container {
	margin-top: 20rpx;
	.info-wrap {
		padding: 20rpx;
		background: #ffffff;
		.member-info {
			height: 80rpx;
			line-height: 80rpx;
		}
		.member-face {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
			overflow: hidden;
			display: inline-block;
			float: left;
			image {
				display: block;
				height: 100%;
				max-width: 100%;
				width: auto;
			}
		}
		.nick-name {
			float: left;
			display: inline-block;
			margin-left: 20rpx;
			line-height: 80rpx;
			white-space: nowrap;
			width: 400rpx;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.no-login {
			font-size: 24rpx;
			padding: 4rpx 10rpx;
			border: 2rpx solid;
			border-radius: 4rpx;
			margin-left: 20rpx;
		}
		.point {
			float: right;
			font-size: 24rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
		.point.point-empty {
			font-size: 40rpx;
			letter-spacing: 8rpx;
		}
		.explain {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			justify-content: space-between;
			.right image {
				width: 14rpx;
			}
		}
	}
}

.goods-container {
	overflow: hidden;
	margin-top: 20rpx;
}

.goods-container .head {
	padding: 10rpx 20rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-weight: bold;
	background: #fff;
	overflow: hidden;
	text-align: center;
	position: relative;
	box-sizing: content-box;
	.list-title {
		overflow: hidden;
		width: auto;
		margin: 0 auto;
		display: inline-block;
	}
	.title-left {
		float: left;
		margin-right: 20rpx;
	}
	.title-left .title-left-second {
		margin-left: 50rpx;
	}
	.title-left-first {
		width: 100rpx;
		height: 24rpx;
		border-bottom: 2rpx solid;
	}
	.title-left-second {
		width: 50rpx;
		height: 10rpx;
		border-bottom: 2rpx solid;
	}
	.title-right {
		margin-left: 20rpx;
		float: left;
	}
	.left-nav {
		font-size: 30rpx;
		float: left;
		letter-spacing: 4rpx;
	}
}

.goods-container .good_list {
	margin: 20rpx 20rpx 0 20rpx;
	display: flex;
	flex-flow: wrap;
	view.goods-item {
		width: calc(50% - 12rpx);
		background: #fff;
		margin: 0 20rpx 20rpx 0;
		.imgs {
			width: 100%;
			position: relative;
			overflow: hidden;
			text-align: center;
			height: 325rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	view.goods-item:nth-child(2n + 2) {
		margin-right: 0;
	}
}

.goods-container .good_list > view.goods-item .info {
	padding: $ns-padding;
	box-sizing: border-box;
	.goods-info {
		font-size: $ns-font-size-lg;
		font-weight: bold;
	}
}
.goods-container .good_list > view.goods-item .info view.goods-title navigator {
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	width: 100%;
	line-height: 40rpx;
	max-height: 80rpx;
	height: 80rpx;
}

.imgs image {
	width: 100%;
}

.goods-container .good_list > view.goods-item .goods_price view.unit {
	font-size: 24rpx;
}

.ns-border-color-gray-shade-20 {
	border-color: #b7b7b7 !important;
}

.goods-title {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 说明弹框 */
.tips-layer {
	background: #fff;
	z-index: 999;
	height: 40%;
	width: 100%;
}

.tips-layer .title {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
}

.tips-layer .body {
	width: 100%;
	height: calc(100% - 80rpx);
	overflow-y: scroll;
}

.tips-layer .body::-webkit-scrollbar {
	display: none;
}

.tips-layer .body .detail {
	padding: 20rpx;
}

.tips-layer .body .detail .ns-font-size-lg {
	margin-bottom: 10rpx;
}
</style>
